<template>
  <div class="poi2d-panel" >
    <div class="panel-title">2D标牌样式</div>
    <div class="poi-grid-container">
      <div
        v-for="item in poi2DOptions"
        :key="item.id"
        class="poi-item"
        @click="createESPoi2D(item)"
      >
        <div class="poi-preview">
          <!-- <div class="poi-label">{{ item.name }}</div> -->
          <div class="poi-icon">
            <img :src="getImageUrl(item.id)" alt="POI图标" />
          </div>
          <!-- <div class="poi-arrow"></div> -->
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ESPoi2D } from 'earthsdk3'
import { getobjm } from '@/utils/getobjm.js'
import { useTreeStore } from '@/stores/treeStore.js'
import { usePlottingStore } from '@/stores/plottingStore.js'
const plottingStore = usePlottingStore()
const treeStore = useTreeStore()
const objm = getobjm()
// 完整的POI选项数据
const poi2DOptions = [
  {
    id: '1',
    name: '方形H1',
    mode: 'SquareH01',
    url: 'mode1.webp',
  },
  {
    id: '2',
    name: '方形H2',
    mode: 'SquareH02',
    url: 'mode2.webp',
  },
  {
    id: '3',
    name: '方形V1',
    mode: 'SquareV01',
    url: 'mode3.webp',
  },
  {
    id: '4',
    name: '方形V2',
    mode: 'SquareV02',
    url: 'mode4.webp',
  },
  {
    id: '5',
    name: '方形V3',
    mode: 'SquareV03',
    url: 'mode5.webp',
  },
  {
    id: '6',
    name: '方形V4',
    mode: 'SquareV04',
    url: 'mode6.webp',
  },
  {
    id: '7',
    name: '旗帜1',
    mode: 'Flag01',
    url: 'mode7.webp',
  },
  {
    id: '8',
    name: '旗帜2',
    mode: 'Flag02',
    url: 'mode8.webp',
  },
  {
    id: '9',
    name: '线形1',
    mode: 'Linear01',
    url: 'mode9.webp',
  },
  {
    id: '10',
    name: '线形2',
    mode: 'Linear02',
    url: 'mode10.webp',
  },
  {
    id: '11',
    name: '线形3',
    mode: 'Linear03',
    url: 'mode11.webp',
  },
  {
    id: '12',
    name: '圆形H1',
    mode: 'CircularH01',
    url: 'mode12.webp',
  },
  {
    id: '13',
    name: '圆形H2',
    mode: 'CircularH01',
    url: 'mode13.webp',
  },
  {
    id: '14',
    name: '圆形V1',
    mode: 'CircularV01',
    url: 'mode14.webp',
  },
  {
    id: '15',
    name: '圆形V2',
    mode: 'CircularV02',
    url: 'mode15.webp',
  },
  {
    id: '16',
    name: '圆形V3',
    mode: 'CircularV03',
    url: 'mode16.webp',
  },
  {
    id: '17',
    name: '圆形V4',
    mode: 'CircularV04',
    url: 'mode17.webp',
  },
  {
    id: '18',
    name: '圆形V5',
    mode: 'CircularV05',
    url: 'mode18.webp',
  },
  {
    id: '19',
    name: '圆形H1',
    mode: 'P3D01',
    url: 'mode19.webp',
  },
  {
    id: '20',
    name: '圆形H2',
    mode: 'P3D02',
    url: 'mode20.webp',
  },
  {
    id: '21',
    name: '圆形H3',
    mode: 'P3D03',
    url: 'mode21.webp',
  },
  {
    id: '22',
    name: '圆形H4',
    mode: 'P3D04',
    url: 'mode22.webp',
  },
  {
    id: '23',
    name: '圆形H5',
    mode: 'P3D05',
    url: 'mode23.webp',
  },
  {
    id: '24',
    name: '圆形H6',
    mode: 'P3D06',
    url: 'mode24.webp',
  },
  {
    id: '25',
    name: '圆形H7',
    mode: 'Diamond01',
    url: 'mode25.webp',
  },
  {
    id: '26',
    name: '菱形H1',
    mode: 'Diamond02',
    url: 'mode26.webp',
  },
  {
    id: '27',
    name: '菱形H2',
    mode: 'Diamond02',
    url: 'mode27.webp',
  },
]

// 使用动态导入处理图片路径
const getImageUrl = (id) => {
  // 方法1: 使用import.meta.url (Vite环境)
  return new URL(`/src/assets/images/sidebar/plottingLibrary/poi2d/mode${id}.webp`, import.meta.url)
    .href
}
// 定义emit，用于通知父组件关闭配置面板
const emit = defineEmits(['close-panel'])
const createESPoi2D = (item) => {
  const sceneObjectESPoi2D = objm.createSceneObject(ESPoi2D)
  if (!sceneObjectESPoi2D) return
  sceneObjectESPoi2D.mode = item.mode
  sceneObjectESPoi2D.editing = true

  sceneObjectESPoi2D.editingChanged.disposableWeakOn(() => {
    if (sceneObjectESPoi2D && sceneObjectESPoi2D.editing === false) {
      const position = sceneObjectESPoi2D.position
      const a = position[0] === 0 && position[1] === 0
      const json = sceneObjectESPoi2D.json
      objm.destroySceneObject(sceneObjectESPoi2D)
      setTimeout(() => {
        if (!a) {
          const addTree = treeStore.createSceneObjectTreeItemFromJson(json)
          plottingStore.createPlottingData.push(addTree)
          if (addTree) treeStore.treeChange()
        }
      }, 300)
    }
  })
  emit('close-panel') //关闭配置面板
}
</script>

<style lang="scss" scoped>
/* 样式保持不变 */
.poi2d-panel {
  width: 380px;
  max-height: 600px;
  background-color: rgba(40, 44, 52, 0.95);
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 195, 255, 0.5);
  border: 1px solid rgba(0, 195, 255, 0.6);
  padding: 15px;
  color: #ffffff;
  display: flex;
  flex-direction: column;
}

.panel-title {
  font-size: 16px;
  color: #00c3ff;
  font-weight: bold;
  margin-bottom: 15px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(0, 195, 255, 0.3);
}

.poi-grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
  overflow-y: auto;
  max-height: 400px;
  padding-right: 5px;

  &::-webkit-scrollbar {
    width: 6px;
  }

  &::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
  }

  &::-webkit-scrollbar-thumb {
    background: rgba(0, 195, 255, 0.5);
    border-radius: 3px;
  }
}

.poi-item {
  cursor: pointer;
  transition: all 0.2s ease;

  &:hover {
    .poi-preview {
      border-color: #00c3ff;
    }
  }

  &.active .poi-preview {
    box-shadow: 0 0 8px rgba(0, 195, 255, 0.8);
    border-color: #00c3ff;
  }
}

.poi-preview {
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  height: 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: rgba(30, 30, 35, 0.5);
  transition: all 0.2s ease;
  padding: 10px;
}

.poi-label {
  background-color: #0066cc;
  color: white;
  padding: 4px 10px;
  border-radius: 2px;
  font-size: 12px;
  margin-bottom: 5px;
  text-align: center;
  min-width: 60px;
}

.poi-icon {
  width: 100%;
  height: 100%;
  background-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 5px;

  img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
}

// .poi-arrow {
//   width: 0;
//   height: 0;
//   border-left: 8px solid transparent;
//   border-right: 8px solid transparent;
//   border-top: 8px solid #0066cc;
//   position: absolute;
//   bottom: -5px;
// }
</style>
